<template>

	
	<view class="api-auth-list">

		<view class="api-auth-list-li" v-for="(a,index) in list">
			<view class="li-left">
				<view class="api-auth-list-li-header">
					<wd-tag custom-class="space" type="primary">GET</wd-tag>
					<text>{{a.name}}</text>
				</view>
				<view class="api-auth-list-li-content">
					<text>{{a.path}}</text>
				</view>
			</view>

			<view class="li-right">
				<wd-button icon="delete" type="error" size="small" plain hairline
					@click="clickDelete(a,index)">删除</wd-button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	
	let emit = defineEmits(['click'])

	defineProps({
		list: {
			type: Array,
			default () {
				return []
			}
		}
	})

	// 点击删除
	function clickDelete(item, index) {
		emit("click", item, index)
	}
</script>

<style>
	.api-auth-list {
		border-radius: 15rpx;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.api-auth-list-li {
		display: flex;
		padding: 22rpx 30rpx;
		background: white;
		border-bottom: 1rpx solid #c3c3c344;
	}

	.li-left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.li-right {
		display: flex;
		align-items: center;
	}

	.api-auth-list-li-header {
		display: flex;
		align-items: center;
		gap: 18rpx;
	}

	.api-auth-list-li-content {
		color: gray;
		font-size: 22rpx;
		margin: 15rpx 0rpx;
	}
</style>